import React, { PureComponent } from 'react'
import {
    View, Text, StyleSheet, StatusBar, Image, ListView, TouchableOpacity, ScrollView, RefreshControl, Dimensions,
    DeviceEventEmitter, FlatList
} from 'react-native'

import LinearGradient from 'react-native-linear-gradient'

import { Heading2, Title, Price } from '../../widget/Text'
import { screen, system } from '../../common'
import * as api from '../../api'
import { color, DetailCell, SpacingView } from '../../widget'

import ShoppingItemComponent from './ShopingItemComponent'

const data = require('./shoping.json');

type Props = {
    navigation: any,
}

type State = {

}


class ShopCartScene extends PureComponent<Props, State> {

    static navigationOptions = ({ navigation }: any) => ({
        header: null,//不使用导航栏
    })

    constructor(props) {
        super(props);
        this.state = {
            allSelecte: data.isAllSelect,
            totalMoney: data.totalMoney,
        }

    }

    getMoney = (m) => {
        this.state.totalMoney = this.state.totalMoney + m;
        //this.state.totalMoney += m;
        data.totalMoney = this.state.totalMoney;
        this.setState({
            totalMoney: this.state.totalMoney
        });

        let i = 0;
        data.datas.map((item) => {
            if (item.isSelect != true) {
                i += 1;
            }
        });
        if (i == 0) {
            data.isAllSelect = true;
            this.setState({ allSelecte: true })
        }
        else {
            data.isAllSelect = false;
            this.setState({ allSelecte: false })
        }
    };

    renderItem = (item) => {
        return (
            <ShoppingItemComponent
                itemData={item}
                money={this.getMoney}
            />
        )
    };

    allSelect = () => {
        data.totalMoney = 0;
        data.isAllSelect = !data.isAllSelect;
        this.state.totalMoney = 0;
        DeviceEventEmitter.emit('allSelect', !this.state.allSelecte);
        this.setState({ allSelecte: !this.state.allSelecte })
    };

    separatorView = () => {
        return (
            <View style={{ height: 10, backgroundColor: '#e9e9e9' }} />
        )
    };

    keyExtractor = (item) => item.name;

    render() {
        let { allSelecte, totalMoney } = this.state
        return (
            <View style={styles.container}>
                {/*头部导航栏*/}
                <LinearGradient colors={['#FACF5B', '#FAC858', '#FBBC53', '#FBB558', '#FAAD6B', '#F9A87A', '#F9A387']}
                    start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} >
                    <View style={styles.headerContainer}>
                        <Text style={styles.headerTitle}>购物车</Text>
                    </View>
                </LinearGradient>

                <FlatList data={data.datas}
                    ItemSeparatorComponent={this.separatorView}
                    renderItem={({ item }) => this.renderItem(item)}
                    keyExtractor={this.keyExtractor}
                />
                <View style={styles.tool}>
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                        <TouchableOpacity style={styles.select} onPress={this.allSelect}>
                            <Image style={styles.selectIcon} source={allSelecte ? require('../../img/ShopCart/Selected.png') : require('../../img/ShopCart/notSelected.png')} />
                            <Text style={{ marginLeft: 3 }}>全选</Text>
                        </TouchableOpacity>
                        <Text style={styles.allMoneyText}>
                            ￥{this.state.totalMoney}
                        </Text>
                    </View>
                    <TouchableOpacity style={styles.balance}>
                        <Text style={styles.balanceText}>去结算</Text>
                    </TouchableOpacity>
                </View>

            </View>
        )
    }


}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    headerContainer: {
        width: screen.width,
        height: 35,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: screen.statusBarHeight,
    },
    headerTitle: {
        fontSize: 20,
        color: 'white',
        fontWeight: 'bold',
    },
    tool : {
        height : 44,
        flexDirection : 'row',
        alignItems : 'center',
        justifyContent : 'center',
        borderTopWidth : 1,
        borderTopColor : '#D3D3D3'
    },
    select : {
        flexDirection : 'row',
        justifyContent : 'center',
        alignItems : 'center',
        marginLeft : 15,
    },
    selectIcon: {
        width: 30,
        height: 30
    },
    balance : {
        width : 100,
        height : 44,
        backgroundColor : 'red',
        alignItems : 'center',
        justifyContent : 'center'
    },
    allMoneyText : {
        fontSize : 20,
        marginLeft : 15
    },
    balanceText : {
        fontSize : 20,
        color : 'white'
    },
})


export default ShopCartScene
